<template>  
	<view class="personal-center-container">
		<view class="up">
			<view class="personal-info-list" >
				<view class="label">昵称</view>  
				<view class="value">
					<input v-model="userInfo.nickName" class="input"></input>
				</view>
			</view>
			 <view class="personal-info-list" >
			 	<view class="label">性别</view>  
			 	<view class="value">
			 		<input v-model="userInfo.sex" class="input"></input>
			 	</view>
			 </view>
		</view>
		<view class="center">
			<view class="personal-info-list" >  
				<view class="label">年龄</view>
				<view class="value">
					<input v-model="userInfo.age" class="input"></input>
				</view>   
			</view>  
			<view class="personal-info-list" >
				<view class="label">擅长运动</view>  
				<view class="value">
					<uni-data-select :localdata="sportList" v-model="sportInfo.sportId" 
					@change="handleSportChange"></uni-data-select>
				</view>
			</view>
		</view>
		<view class="down">
			<view class="personal-info-list" >  
				<view class="label">签名</view>
				<view class="value1">
					<textarea v-model="userInfo.sign" class="input"></textarea>
				</view>   
			</view> 
		</view>
		<view class="btn-wrap">  
			<button @click="handleSave" type="primary">保存</button>  
		</view>
	</view>  
</template>  
  
<script>
import { hasLogin } from '../../store';

export default {
	data() {
		return {
			sportList: [], // 运动数据列表
			userInfo: {
				nickName: '',
				sex: '',
				age: '',
				sign: '',
				userId: 0
			},
			sportInfo: {
				sportId: 0,
				sportName: '',
			},
			preferenceId: 0,
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: '个人中心'
		});
		// 获取用户信息
		if (hasLogin()) {
			let userInfoStr = uni.getStorageSync("userInfo");
			if (userInfoStr) {
				this.userInfo = JSON.parse(userInfoStr);	
			} else {
				uni.showToast({
					title: '用户信息不存在，请重新登录',
					icon: 'none'
				});
			}
		}
		// 调用方法获取运动数据列表
		this.getSportsList();
		// 调用方法获取个人运动数据
		this.getUserSport();
	},
	methods: {
		// 获取运动数据列表
		getSportsList() {
			uni.request({
				url: 'http://localhost:8090/api/sports/all',
				method: 'GET',
				success: (res) => {
					this.sportList = res.data.data.map(item => ({
						value: item.sportId,
						text: item.sportName
					}));
					console.log(this.sportList);
				},
				fail: (err) => {
					console.error('获取运动列表失败', err);
				}
			});
		},
		// 获取个人所选择的运动
		getUserSport() {
			uni.request({
				url: `http://localhost:8090/api/preferences/${this.userInfo.userId}`,
				method: 'GET',
				success: (res) => {
					this.preferenceId = res.data.preferenceId;
					this.sportInfo = res.data.data;
					console.log(this.sportInfo);
				},
				fail: () => {
					console.log('获取运动数据列表失败！');
				}
			});
		},
		handleSave() {
			uni.request({
				url: 'http://localhost:8090/api/users/update',
				method: 'POST',
				data: {
					user: {
						nickName: this.userInfo.nickName,
						sex: this.userInfo.sex,
						age: this.userInfo.age,
						sign: this.userInfo.sign,
						userId: this.userInfo.userId
					},
					userPreference: {
						preferenceId: this.userInfo.userId,
						sportId: this.sportInfo,
						userId: this.userInfo.userId
					}
				},
				success: (res) => {
					console.log("用户选择后的sportInfo", this.sportInfo);
					console.log("用户选择后的sportId", this.sportInfo.sportId);
					// 更新缓存中的用户信息
					this.updateUserInfoInCache();
					// 显示保存成功提示
					uni.showToast({
						title: '保存成功！',
						icon: 'success'
					});
					console.log('用户信息更新成功', res.data);
				},
				fail: (err) => {
					uni.showToast({
						title: '保存失败！',
						icon: 'fail'
					});
					console.error('用户信息更新失败', err);
				}
			});
		},
		updateUserInfoInCache() {
		    // 更新缓存中的用户信息
		    uni.removeStorageSync('userInfo');
		    uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
		},
		handleSportChange(newValue) {
			this.sportInfo = newValue;
		}
	}
};
</script>

<style scoped>
.personal-center-container {  
	display: flex;  
	flex-direction: column;  
	padding: 20rpx;  
	background-color: white; /* 主页面灰色背景 */
}  
  
.personal-info-list {  
	display: flex;  
	justify-content: space-between;  
	align-items: center;
	margin-bottom: 20rpx;  
	margin-top: 40rpx;
	background-color: white;
	
}  
.up{
	border: 1px solid;
	border-color: #f5f5f5;
}
	
.center{
	border: 1px solid;
	border-color: #f5f5f5;
	margin-top: 80rpx;
}
.label {  
	color: #333;  
	font-weight: bold;
	font-size: 38rpx;
	width: 30%; /* 根据需要调整宽度 */
	margin-left: 80rpx;
}  
  
.value {  
	width: 70%; /* 根据需要调整宽度 */
	}
.value1{
	border: 1px solid gainsboro;
	width: 500rpx;
	height: 200rpx;
}

.input{
	font-size: 38rpx;
	max-height: 200rpx; /* 根据实际需要设置 */  
	overflow-y: auto;
} 
 
 
.input-box {  
	height: 80rpx; /* 调整输入框的高度 */  
	border: 1rpx solid #ccc;  
	border-radius: 10rpx;  
	padding: 0 10rpx;  
	font-size: 28rpx;  
}  

.btn-wrap {
	margin: 20% 10% 20% 10%; /* 将按钮顶部与父容器底部对齐 */
	width: 80%; /* 设置按钮宽度为父容器的80% */
}

button {
	width: 100%;
	height: 50px; /* 设置按钮高度 */
	border-radius: 25px; /* 设置按钮圆角 */
	background-color: #007bff; /* 设置按钮背景颜色 */
	color: #fff; /* 设置按钮文字颜色 */
	font-size: 20px; /* 设置按钮文字大小 */
	border: none; /* 去除按钮边框 */
}
</style>